<template>
    <div style="margin: 0 20px;">
        <h2>Vue2事件绑定方式(@load.native)</h2>
        <p>@load.native="onload"</p>
        <p>
            <button @click="execCommand('preview')">预览</button>
            <button @click="execCommand('print')">打印</button>
            <button @click="execCommand('exportHtml')">导出html</button>
            <button @click="execCommand('exportPdf')">导出pdf</button>
        </p>
        <Editor mode="design"  @load.native="onload1"  width="100%"></Editor>
        <P>表单模式&只读模式</P>
        <Editor mode="form" doc="/mock/bind_data.html"  width="45%" @load.native="onload2"></Editor>
        <Editor mode="readonly" doc="/mock/bind_data.html"  width="45%" style="margin-left: 20px;"></Editor>
    </div>
</template>

<script>
import Editor from '@/components/Editor.vue'

export default{
    components: {'Editor' : Editor},
    data(){
        return{
            editor1: null, //第1个文档实例
            editor2: null,//第2个文档实例
        }
    },
    methods:{
        //初始化第1个文档
        onload1: function(e) {
            this.editor1 = e.target.contentWindow.editor
            //编辑器加载完成后，需要默认文档操作的情况
            setTimeout(()=>{
                this.editor1.loadUrl('/mock/bind_data.html').then(()=>{
                    this.editor1.setBindObject('周杰伦' ,'name')
                })
            }, 0)
        },
        
        //初始化第2个文档
        onload2: function(e) {
            this.editor2 = e.target.contentWindow.editor
        },

        //执行文档命令
        execCommand: function(cmd) {
            this.editor1.execCommand(cmd)
        },

    }
}
</script>